<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="keys" content="">
    <meta name="author" content="">
    <%@include file="/WEB-INF/includes/css-file.jsp" %>
    <link rel="stylesheet" href="${ctp}/static/css/login.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <div><a class="navbar-brand" href="${ctp}/index.jsp" style="font-size:32px;">尚筹网-创意产品众筹平台</a></div>
        </div>
    </div>
</nav>

<div class="container">
    <form id="regForm" class="form-signin" role="form" action="${ctp}/permission/user/reg" method="post">
        <h2 class="form-signin-heading"><i class="glyphicon glyphicon-log-in"></i> 用户注册</h2>
        <div class="form-group has-success has-feedback">
            <input type="text" name="loginacct" class="form-control"
                   id="loginacct_input" placeholder="请输入登录账号" value="${TUser.loginacct}" autofocus>
            <span class="glyphicon glyphicon-user form-control-feedback"></span>
            <%--            <label for="loginacct_input" class="error"></label>--%>
            <span class="errorinfo" style="color: red"></span>
        </div>
        <div class="form-group has-success has-feedback">
            <input type="password" name="userpswd" class="form-control"
                   id="userpswd_input" placeholder="请输入登录密码" style="margin-top:10px;">
            <span class="glyphicon glyphicon-lock form-control-feedback"></span>
            <span class="errorinfo" style="color: red"></span>
        </div>
        <div class="form-group has-success has-feedback">
            <input type="text" name="email" class="form-control"
                   id="email_input" placeholder="请输入邮箱地址" value="${TUser.email}" style="margin-top:10px;">
            <span class="glyphicon glyphicon glyphicon-envelope form-control-feedback"></span>
            <span class="errorinfo" style="color: red"></span>
        </div>
        <div class="form-group has-success has-feedback">
            <select class="form-control">
                <option>会员</option>
                <option>管理</option>
            </select>
        </div>
        <div class="checkbox">
            <label>
                <a href="${ctp}/topswpage.html">忘记密码</a>
            </label>
            <label style="float:right">
                <a href="${ctp}/login.jsp">我有账号</a>
            </label>
        </div>
        <a id="submitBtn" class="btn btn-lg btn-success btn-block"> 注册</a>
    </form>
</div>
<%@include file="/WEB-INF/includes/js-file.jsp" %>
<script type="text/javascript">
    // 给验证器设置一些策略
    $.validator.setDefaults({
        showErrors: function (map, list) {
            // console.log(map);
            // console.log(list);
            // 先清除所有错误和状态
            $(".errorinfo").empty();
            $(".form-group").removeClass("has-success has-error has-warning");
            // 将每个元素自己的错误信息显示在自己的图标下
            $.each(list, function () {
                // element当前错误元素
                $(this.element).nextAll(".errorinfo").text(this.message);
                // 改变input状态
                $(this.element).parent("div.form-group").addClass("has-error");
            });
        }
    });
    $("#submitBtn").click(function () {
        var loginType = $("select.form-control").val();
        if (loginType == "管理") {
            $("#regForm").submit();
        } else {
            alert("此功能尚未开通");
        }
        return false;
    });
    $("#regForm").validate({
        rules: {
            loginacct: {
                required: true,
                minlength: 6
            },
            userpswd: {
                required: true,
                minlength: 6
            },
            email: {
                required: true,
                email: true
            }
        },
        messages: {
            loginacct: {
                required: "用户的登录帐号是必须的",
                minlength: "登录帐号必须是6位以上"
            },
            userpswd: {
                required: "请填写密码",
                minlength: "密码必须在6位以上"
            },
            email: {
                required: "邮箱必须填写",
                email: "请输入正确的邮箱格式"
            }
        },
        // errorPlacement: function (error, element) {
        //     error.appendTo(element.parent());
        // }
    });
</script>
</body>
</html>